<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局头部 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col :span="20"> <svg-icon icon-class="home" /><span>江苏传智播客教育科技股份有限公司</span> </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <!-- 下拉菜单 element -->
              <el-col>
                <el-dropdown>
                  <span style="margin-left: 30px"> 操作<i class="el-icon-arrow-down"></i> </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="hShowState('add', '1')">添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- :props="defaultProps" -->
        <el-tree :data="list" :props="defaultProps" default-expand-all>
          <!-- 主体部分 -->
          <template #default="{ data }">
            <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%">
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.managerName }}</el-col>
                  <!-- 下拉菜单 element -->
                  <el-col>
                    <el-dropdown>
                      <span style="margin-left: 30px"> 操作<i class="el-icon-arrow-down"></i> </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="hShowState('add', data.id)">添加子部门</el-dropdown-item>
                        <el-dropdown-item @click.native="hShowState('edit', data.id)">编辑部门</el-dropdown-item>
                        <el-dropdown-item v-if="data.children.length === 0" @click.native="del(data.id)">删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- dialog位置  -->
    <el-dialog :title="isEdit ? '编辑' : '添加'" :visible.sync="showDialog" width="50%" :close-on-press-escape="false" :close-on-click-modal="false">
      <!-- 这里把dialog里面的内容封装到一个组件中，方便维护 -->
      <add-or-edit v-if="showDialog" :id="currentId" ref="dialogForm" :origin-list="originList" :is-edit="isEdit" @successChange="hSuccess" @cancel="hclose" />
    </el-dialog>
  </div>
</template>

<script>
import { deleteDepartDetailById, getDepartMentList } from '@/api/departments'
// import { transListToTree } from '@/utils/index'
import addOrEdit from '@/views/departments/deptDialog'
import { transListToTreeData } from '@/utils/index'
export default {
  name: 'DepartmentIndex',
  components: {
    addOrEdit
  },

  data() {
    return {
      // 依赖一份树形数据
      list: [],
      originList: [], // 源数据，做code校验用的
      defaultProps: {
        children: 'children', // 表示层级关系的属性名
        label: 'name' // 渲染节点文本的属性名
      },
      showDialog: false,
      currentId: '',
      // isEdit是dialog的状态是添加还是编辑，添加是false，编辑是true
      isEdit: false
    }
  },
  created() {
    this.loadGetDepartment()
  },
  methods: {
    // 获取部门数据
    async loadGetDepartment() {
      try {
        const res = await getDepartMentList()
        // console.log(res)
        res.data.shift()
        // 利用循环把拿到的数组对象，拆出只包含id，pid，name，code的数组对象
        this.originList = res.data.map(({ id, pid, name, code }) => ({ id, pid, name, code }))
        // 平铺结构transListToTreeData
        this.list = transListToTreeData(res.data, 1)
      } catch (error) {
        console.log(error)
      }
    },
    // 显示隐藏dialog
    hShowState(type, id) {
      this.showDialog = true
      this.currentId = id
      // 如果是添加状态isEdit为false,如果是编辑isEdit为true
      if (type === 'add') {
        this.isEdit = false
      } else {
        this.isEdit = true
      }
    },

    // 子组件新增部门成功之后，父组件关闭dialog
    hSuccess() {
      this.showDialog = false
      // 从新渲染页面
      this.loadGetDepartment()
      // this.$refs.dialogForm.hEmpty()
    },
    // 点击取消关闭dialog
    hclose() {
      this.showDialog = false
    },
    // 点击删除部门
    async del(id) {
      // 提示用户是否退出登录
      const res = await this.$confirm('您确认要删除吗?', '提示', {
        type: 'warning'
      }).catch(e => e)
      if (res === 'cancel') return
      try {
        const res = await deleteDepartDetailById(id)
        // 提示用户删除成功
        this.$message.success(res.message)
        // 从新渲染页面
        this.loadGetDepartment()
      } catch (error) {
        this.$message.error(error.message)
      }
    }
  }
}
</script>
